<template>
    <h1>会员添加</h1>
    <div>
        <table class="table">
            <thead>
                <tr>
                    <td>会员名称</td>
                    <td>
                      <input type="text" v-model="data.name">
                    </td>
                  
                </tr>
                <tr>
                    <td>年龄</td>
                    <td>
                        <input type="text" v-model="data.age">
                    </td>
                  
                </tr>
                <tr>
                    <td>密码</td>
                    <td>
                       
                        <input type="password" v-model="data.pos">
                    </td>
                  
                </tr>
                <tr>
                    <td>头像</td>
                    <td>
                        <input type="file" @change="upload">
                        <img :src="'https://localhost:7083/'+data.img" style="height: 100px;width: 100px;">
                    </td>
                  
                </tr>
                <tr>
                    <td>手机号</td>
                    <td>
                        <input type="text" v-model="data.phone">
                    </td>
                  
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                       <input type="text" v-model="data.sex">
                    </td>
                  
                </tr>
                <tr>
                    <td>会员状态</td>
                    <td>
                        <input type="checkbox" v-model="data.start">选中为启用，不选中为禁用
                    </td>
                  
                </tr>
                <tr>
                    <td>会员等级</td>
                    <td>
                        <select v-model="data.mid">
                        <option value="0">请选择</option>
                        <option v-for="a in find" :value="a.mid">{{a.name  }}</option>
                       </select>
                    </td>
                  
                </tr>
                <tr>
                  
                    <td colspan="2">
                        <input type="button" value="添加" @click="Add">
                    </td>
                  
                </tr>
            </thead>
        </table>
    </div>
</template>
<script setup lang="ts">
import {ref,onMounted} from "vue"
import axios from "axios";
const data=ref({
    "id": 0,
  "name": "",
  "age": "",
  "pos": "",
  "img": "",
  "phone": "",
  "sex": 0,
  "start": true,
  "mid": 0
})
const upload=(e:any)=>{
    var f=e.target.files[0]
    var fd=new FormData()
    fd.append("file",f)
    if(f.size>1024*1024*2){
        alert('图片大小不能超过2MB')
        return
    }
    if(f.type!="image/jpeg"&&f.type!="image/png"){
        alert('图片类型只能为JPG|PNG')
        return
    }
    axios.post("https://localhost:7083/api/UpLoad/upload",fd).then(res=>{
        data.value.img=res.data
    })
}

const Add=()=>{
    axios.post("https://localhost:7083/api/User/AddUser",data.value).then(res=>{
        if(res.data>0){
            alert('添加成功');
            location.href='/ShowUserView';
        }
        else{
            alert('添加失败');
        }
    })
}
const find=ref([{
    "mid": 0,
  "name": "",
  "qid": 1,
  "start": true
}])
onMounted(()=>{
    Xialak();
})
const Xialak=()=>{
    axios.get("https://localhost:7083/api/User/Xiala").then(res=>{
        find.value=res.data
    })
}
</script>
<style scoped></style>